import React, {FC, useEffect} from "react";
import {Outlet, useNavigate} from "react-router-dom"
import {Layout, Modal} from "antd";
import PageHead from "../../components/PageHead";
import Navigation from "../../components/Navigation";
import api from "../../api";
import {inject, observer} from 'mobx-react';

import ReactDOMServer from 'react-dom/server'

const {Header, Sider, Content} = Layout;

const Main: FC<any> = ({MobxData}) => {
    const navigate = useNavigate()
    const {changeUserInfo} = MobxData;
    useEffect(() => {
        api.getUserInfo().then((res) => {
            if (res.code === 200) {
                // 存全局数据
                changeUserInfo(res.data);
                // 存用户数据
                localStorage.setItem('username', res.data.username)
                localStorage.setItem('phone', res.data.phone)
                localStorage.setItem('role', res.data.role)

                if (res.data.role < 1 && res.data.classname === "") {
                    Modal.warning({
                        title: '温馨提示',
                        content: '您的账号还未分配班级，请联系管理员分配班级或到个人中心选择班级',
                        afterClose: () => {
                            navigate('/main/mine', {replace: false, state: {show: true}})
                        }
                    })
                }
            } else {
                navigate("/login");
            }
        })
    }, [])
    return (
        <Layout style={{width: "100%", height: "100%"}}>
            <Header style={{backgroundColor: "#3f7ac5", height: "90px"}}>
                <PageHead/>{/* 页头 */}
            </Header>
            <Layout style={{width: "100%"}}>
                <Sider theme="light">
                    <Navigation/>{/* 侧边导航 */}
                </Sider>
                <Content style={{padding: "20px"}}>
                    <Outlet/>{/* 子路由 */}
                </Content>
            </Layout>
        </Layout>
    );
}

export default inject('MobxData')(observer(Main));